<template>
	<div id="Login">
		<div id="center">
			<div id="logo">
				<!-- <img src="" alt="" /> -->
				<!-- <img alt="" src="../assets/SquareLogo.svg" /> -->
				<img src="http://public.znrdtech.cn/images/SquareLogo.png" alt="" srcset="" />
				<div id="h1">湖 南 融 达 机 电</div>
				<div id="h6">HU NAN RONG DA JI DIAN</div>
			</div>
			<el-divider id="el-divider" direction="vertical"></el-divider>
			<div id="form">
				<div id="title">融达项目后台登录</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
					<el-form-item prop="UserName" size="medium">
						<el-input v-model="ruleForm.UserName" placeholder="请输入身份证号/手机号">
							<i slot="prefix" class="el-input__icon el-icon-user"></i>
							<el-divider direction="vertical"></el-divider>
						</el-input>
					</el-form-item>
					<el-form-item prop="password" size="medium">
						<el-input v-model="ruleForm.password" placeholder="请输入密码" show-password>
							<i slot="prefix" class="el-input__icon el-icon-lock"></i>
							<el-divider direction="vertical"></el-divider>
						</el-input>
					</el-form-item>
					<el-row id="password">
						<el-col :span="12">
							<el-form-item size="medium">
								<el-checkbox v-model="ruleForm.RememberPassword">记住密码</el-checkbox>
							</el-form-item>
						</el-col>
						<el-col
							class="el-checkbox__label ForgotPassword"
							:span="12"
							style="text-align: right; height: 41px; line-height: 41px"
						>
							忘记密码？
						</el-col>
					</el-row>
					<el-form-item size="medium">
						<el-button id="Logins" type="primary" @click="submitForm('ruleForm')">登录</el-button>
					</el-form-item>
				</el-form>
				<el-divider content-position="center">其他登录方式</el-divider>
				<div id="LoginMethodList">
					<div id="list">
						<img src="" alt="" srcset="" />
						<span>职能部门登陆</span>
					</div>
					<div id="list">
						<img src="" alt="" srcset="" />
						<span>职能部门登陆</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
	// import引入的组件需要注入到对象中才能使用
	components: {},
	props: {},
	data() {
		// 这里存放数据
		return {
			ruleForm: {
				UserName: '18073190022',
				password: '6ef2988292042f0Aa',
				// delivery: false,
				RememberPassword: true
				// type: []
			},
			rules: {
				UserName: [
					{required: true, message: '请输入身份证号/手机号', trigger: 'blur'},
					{min: 11, max: 32, message: '长度在 16 到 32 个字符', trigger: 'blur'}
				],
				password: [
					{required: true, message: '请输入密码', trigger: 'blur'},
					{min: 16, max: 32, message: '长度在 16 到 32 个字符', trigger: 'blur'}
				]
			}
		}
	},
	computed: {}, // 计算属性 类似于data概念
	watch: {}, // 监控data中的数据变化
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					// alert('submit!')
					console.log(this.ruleForm)
				} else {
					console.log('error submit!!')
					return false
				}
			})
		}
	}, // 方法集合
	created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
	mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less">
#Login {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: #fafafa;
	background-image: url(http://zhdj.xfc.gov.cn/static/img/home-bg-01.e060cb3.png);
	background-repeat: no-repeat;
	background-position: 0 200px;
	background-size: 100%;
	position: relative;
	overflow: hidden;
	#center {
		width: 990px;
		height: 500px;
		border-radius: 10px;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		#logo,
		#form {
			width: 50%;
			height: 100%;
		}
		#logo {
			padding: 55px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			img {
				width: 280px;
				height: 280px;
			}
			#h1 {
				display: block;
				font-size: 2em;
				font-weight: bold;
			}
			#h6 {
				display: block;
				font-size: 1.05em;
				font-weight: bold;
			}
		}
		#form {
			padding: 55px;
			#title {
				text-align: center;
				font-size: 2em;
				font-weight: bold;
				color: #222;
				background: transparent;
				margin: 0 0 22px;
			}
			#password {
				width: 100%;
				.el-col {
					.el-form-item {
						margin: 0 !important;
					}
				}
				.ForgotPassword {
					padding: 0;
				}
			}
			#Logins {
				width: 100%;
			}
		}
		#el-divider {
			height: 100%;
		}
		.el-divider__text {
			padding: 0 !important;
		}
		#LoginMethodList {
			display: flex;
			justify-content: space-evenly;
			#list {
				display: flex;
				flex-direction: column;
				align-items: center;
				img {
					width: 30px;
					height: 30px;
				}
				span {
					font-size: 14px;
				}
			}
		}
	}
}
</style>
